<template>
    <!-- 预约会诊 -->
    <div>
        <!-- 头部 -->
        <div id="head">
            <h1>Any<font color=orange>C</font>heck</h1>
            <h3>硅谷检测</h3><hr style="width:60px;position: absolute;top: 38px;left:170px;transform:rotate(90deg)">
            <span style="font-size:50px;position: absolute;top: 30px;left: 230px;">体检自助服务系统</span>
            <h2 style="position: absolute;right:380px;top:50px;color:DodgerBlue ">AM</h2>
            <span style="position:absolute;left:1200px;top:70px">{{newDate}}</span>
        </div>
        <hr>
        <!-- 中间部分 -->
        <div id="between">
            <el-row>
                <el-col :span="8" v-for="item in prolist" :key="item.id">
                    <div class="grid-content bg-purple" :class="item.class" @click="dj(item.id)">
                        <svg class="icon myIcom" aria-hidden="true" style="font-size: 100px;margin-top: 20px;">
                          <use :xlink:href="item.icon"></use>
                        </svg>
                    <span>{{item.protype}}</span>
                    </div>
                </el-col>
            </el-row>
        </div>
        <hr style="border: 0.001px solid black;width: 1500px;position: absolute;top: 90px;left: 15px;">
        <!-- 尾部 -->
        <div id="tail">
            <input type="button" class="tail_fui"  value="返回" @click="getphysic"/>
            <img src="static/img/113185128c30db865dfe643b4fc8a039.jpeg" width="40px">
            <span>温馨提示:请仔细浏览后用鼠标点击<font color=red>以上按钮</font>选择相应的功能</span>
        </div>
    </div>
</template>

<script>
import '../assets/icon/iconfont/iconfont.js'
export default {
  name: 'Appointment',
  data () {
    return {
      newDate: new Date(),
      prolist: [
        {id: '1', protype: '入职体检', prostate: '1', class: 'frists', icon: '#icon-yuangongruzhi'},
        {id: '2', protype: '健康体检', prostate: '1', class: 'twos', icon: '#icon-xinlike'},
        {id: '3', protype: '老年体检', prostate: '1', class: 'threes', icon: '#icon-congyerenshu'},
        {id: '4', protype: '全面体检', prostate: '1', class: 'frons', icon: '#icon-yewutubiao_xueshengchaxun'},
        {id: '5', protype: '学生体检', prostate: '1', class: 'sixs', icon: '#icon-jiangzhangxunzhang'},
        {id: '6', protype: '职业病体检', prostate: '1', class: 'feis', icon: '#icon-zhiyebing'}
      ]
    }
  },
  methods: {
    // 返回按钮
    getphysic () {
      this.$router.push('/home')
    },
    // 类型的点击事件 进入套餐页面
    dj (num) {
      this.$router.push('/physical/' + num)
    }
  },
  // 挂载时间
  mounted () {
    let that = this
    this.timer = setInterval(function () {
      that.newDate = new Date().toLocaleString()
    })
  },
  // 销毁时清除计时器
  beforeDestroy: function () {
    if (this.timer) {
      clearInterval(this.timer)
    }
  }
}
</script>

<style>
    #head{width: 1400px;}
    #head h1{font-size: 30px;color: DodgerBlue ;position: absolute;left: 50px;top: 10px;}
    #head h3{color: DodgerBlue ;display: inline;position: absolute;top: 43px;left: 65px;}
    #head span{font-size: 25px;position: absolute;top: 50px;left: 200px;}
    .frists{width: 300px;height: 180px;border-radius: 15px;background-color: RoyalBlue ;position: absolute;top:5px;left: 100px;cursor: pointer;}
    .twos{width: 300px;height: 180px;border-radius: 15px;background-color: DeepSkyBlue  ;position: absolute;left: 500px;cursor: pointer;}
    .threes{width: 300px;height: 180px;border-radius: 15px;background-color: RoyalBlue ;position: absolute;right: 100px;cursor: pointer;}
    .frons{width: 300px;height: 180px;border-radius: 15px;background-color: DeepSkyBlue ;position: absolute;left: 900px;top: 250px;cursor: pointer;}
    .sixs{width: 300px;height: 180px;border-radius: 15px;background-color: RoyalBlue ;position: absolute;left: 500px;top: 250px;cursor: pointer;}
    .feis{width: 300px;height: 180px;border-radius: 15px;background-color: DeepSkyBlue ;position: absolute;left: 100px;top: 250px;cursor: pointer;}
    #between{position:absolute;top:170px;left:100px;width:1300px;height:500px;text-align: center;}
    #between span{position: absolute;top: 125px;left: 110px;color: white;font-size: 20px;}
    /* #between .el-avatar{position: absolute;top: 25px;} */
    hr{position:absolute;top: 640px;left: 15px;border: 0.01px solid black;width: 1500px;}
    .tail_fui{position:absolute;bottom:18px;right: 20px;width: 65px; height: 65px; border-radius:50%;border: none;background-color:orange;color:white;font-size:18px}
    #tail{position:absolute;top: 670px;left: 80px;width: 1400px;}
    .icon{width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}
</style>
